<template>
  <div class="oneToOneScreen">
    <div class="head">
      <i class="iconfont head-icon" @click="comeBack">&#xe689;</i>
      希望工程一对一筛选
      <span v-if="studentList.length > 0" class="shaixuan" @click="goshaixuan"><i class="iconfont">&#xe64f;</i> 筛选</span>
    </div>
    <div class="titleImage">
      <div class="eventImage">
        <img src="../../images/findHome.png" alt="">
      </div>
      <div class="popupAbove"></div>
      <div class="titleText">
        <p class="screenEventTitle"><i class="iconfont">&#xe652;</i><span v-html="title"></span><i class="iconfont">&#xe651;</i></p>
        <p class="screenMiddle">仍待匹配对象还有</p>
        <p class="screenPeopleNum"><span>{{peopleNum}}</span> 人</p>
      </div>
    </div>
    <div class="screen" ref="screen" v-show="studentList.length <= 0">
      <div class="screenti">请选择筛选条件</div>
      <div class="screencon">
        <ul>
          <li @click="showdy = true">
            <i class="iconfont iconfont-left">&#xe654;</i> 地域
            <i class="iconfont iconfont-right">&#xe64c;</i>
            <span v-model="aready">{{aready[0]}} {{aready[1]}}</span>
          </li>
          <li @click="showxb = true">
            <i class="iconfont iconfont-left">&#xe653;</i> 性别
            <i class="iconfont iconfont-right">&#xe64c;</i>
            <span v-model="sex">{{sex[0]}}</span>
          </li>
          <li class="bottomLi" @click="shownl = true" v-if="biunique_id != 'eb783144cf9e47f999708a67d48b576d'">
            <i class="iconfont iconfont-left">&#xe655;</i> 年龄
            <i class="iconfont iconfont-right">&#xe64c;</i>
            <span v-model="age">{{age[0]}}</span>
          </li>
          <li class="" style="display: flex;" v-if="biunique_id == 'eb783144cf9e47f999708a67d48b576d'">
                    <i class="iconfont iconfont-left">&#xe655;</i> 姓名
                    <input placeholder="" v-model="name"  style="width: 82%;height:60%;margin-top: 10px;margin-left: 4px;"/>
           </li>
          <li class="" style="display: flex;" v-if="biunique_id == 'eb783144cf9e47f999708a67d48b576d'">
                    <i class="iconfont iconfont-left">&#xe655;</i> 录取院校
                    <input placeholder="" v-model="school" style="width: 71%;height:60%;margin-top: 10px;margin-left: 4px;"/>
           </li>
        </ul>
      </div>
    </div>
    <div v-show="studentList.length <= 0" class="srceenBtn" @click="goScreen">开 始 筛 选</div>

    <div class="screenList">
      <!--以下是列表部分-->
      <ul>
        <li @click="goOneToOneDonation(studentLists.id)" class="screenListOne" v-for="studentLists in studentList">
          <div class="oneImage">
            <img v-if="studentLists.photo != ''" :src="imageUrl.imageUrl + studentLists.photo" alt="">
            <img v-else-if="studentLists.sex == '男'" src="../../images/man.png" alt="">
            <img v-else-if="studentLists.sex == '女'" src="../../images/woman.png" alt="">
          </div>
          <div class="oneMessage" v-if="biunique_id == 'eb783144cf9e47f999708a67d48b576d'">
                    <p>姓名：{{studentLists.name}}</p>
                    <p>编号：{{studentLists.studentid}}</p>
                    <p>性别：{{studentLists.sex}}</p>
                    <p>高考成绩：{{studentLists.scoreGk}}</p>
                    <p>录取院校：{{studentLists.colleges}}</p>
                    <p>地区：{{studentLists.city}} {{studentLists.country}}</p>
          </div>
          <div class="oneMessage" v-else>
            <p>姓名：{{studentLists.name}}</p>
            <p>编号：{{studentLists.studentid}}</p>
            <p>性别：{{studentLists.sex}}</p>
            <p>年龄：{{studentLists.age}}岁</p>
            <p>地区：{{studentLists.city}} {{studentLists.country}}</p>
          </div>
        </li>
      </ul>
    </div>

    <!--以下是弹出框-->
    <div class="grgoupbox">
      <!--选择地域-->
      <div v-transfer-dom>
        <popup v-model="showdy" position="bottom" max-height="50%">
          <div style="padding: 15px;background-color: #ffffff;">
            <div>
              <p style="height: 30px;line-height: 30px;font-size: 16px;text-align: center;padding-left: 30px;">
                <span>请选择地域</span>
                <span style="color: #1AAC19;float: right" @click="showdy = false">确定</span></p>
            </div>
            <!--<div style="float: right;color: #1AAC19;font-size: 16px" @click="showdy = false">确定</div>-->
            <picker :data='area' v-model='aready' @on-change='' :fixed-columns="2" :columns=3></picker>
          </div>
        </popup>
      </div>
    </div>

    <div class="grgoupbox">
      <!--选择性别-->
      <div v-transfer-dom>
        <popup v-model="showxb" position="bottom" max-height="50%">
          <div style="padding: 15px;background-color: #ffffff;">
            <div>
              <p style="height: 30px;line-height: 30px;font-size: 16px;text-align: center;padding-left: 30px;">
                <span>请选择性别</span>
                <span style="color: #1AAC19;float: right" @click="showxb = false">确定</span></p>
            </div>
            <!--<div style="float: right;color: #1AAC19;font-size: 16px" @click="showdy = false">确定</div>-->
            <picker :data='sexs' v-model='sex' @on-change='' :fixed-columns="1" :columns=1></picker>
          </div>
        </popup>
      </div>
    </div>

    <div class="grgoupbox">
      <!--选择年龄-->
      <div v-transfer-dom>
        <popup v-model="shownl" position="bottom" max-height="50%">
          <div style="padding: 15px;background-color: #ffffff;">
            <div>
              <p style="height: 30px;line-height: 30px;font-size: 16px;text-align: center;padding-left: 30px;">
                <span>请选择年龄</span>
                <span style="color: #1AAC19;float: right" @click="shownl = false">确定</span></p>
            </div>
            <!--<div style="float: right;color: #1AAC19;font-size: 16px" @click="showdy = false">确定</div>-->
            <picker :data='ages' v-model='age' @on-change='' :fixed-columns="1" :columns=1></picker>
          </div>
        </popup>
      </div>
    </div>
  </div>
</template>

<style lang="scss" src='./oneToOneScreen.scss'></style>
<script src="./oneToOneScreen.js"></script>
